<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>校验测试</title>
    <meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=keywords content="校验，测试">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
</head>

<body>
    <div id="errors">正在校验中……</div>
    <script type="text/javascript">
        //添加其他国际化信息
        //SneakxyValidator.load('zh-TW', {……});
        //改变当前国际化错误信息，默认：zh-CN
        //SneakxyValidator.i18n("zh-CN");
        //SneakxyValidator.i18n("en-US");
        //直接覆盖当前国际化信息
        //SneakxyValidator.i18n({……});

        //添加自定义校验
        //SneakxyValidator.registerValidator('custom', (value, rule, label, messages) => {});
        //删除校验
        //SneakxyValidator.removeValidator("range");

        //需要校验的数据
        var model = {
            name: '333@163.com',
            age: 0
            
        };
        //每个字段可以包含一个或多个校验规则，对象或者数组
        //校验规则格式：rules = { name: {……} ]} 或者 rules = { name: [ {……} ]}
        var rules = {
            name: {
                //替换错误信息中的{0}。不填写{0}会被替换成被校验的“字段名”,本例中为"name"。规则为数组的情况只第一个规则填写此字段即可
                label: "姓名", 
                //校验数据类型：string、function、array、object、number、date、boolean、integer、float、regexp、email、url、color、mobile
                type: "email", 
                required: true,    
                selected: true, //与required一样，错误提示可单独设置
                min: 5, //数据值类型为string、number、array时有效
                max: 10, //数据值类型为string、number、array时有效
                range: [5, 10],    //范围,数据值类型为string、number、array时有效
                len: 10, //数据值类型为string、number、array时有效
                //message: "", //自定义错误信息。最好在规则数组中单独使用，一般跟自定义校验使用，不然所有校验错误信息都会是此数据
                validate(value, rule, label, messages) {
                    //自定义校验，同步校验
                    return new Promise(resolve => {
                        setTimeout(() => {
                            resolve(new Error('自定义错误信息.'));
                            //resolve(false); //会返回default错误信息，如设置message则返回message信息
                        }, 1000);
                    });
                    //另外两种返回形式
                    //return true;
                    //return new Error('自定义错误信息.');
                }
            },
            age: [{
                label: "年龄",
                type: "integer",
                required: true,
                min: 1,
                max: 120
            }]
        }

        var options = {
            firstError: false, //每个字段是否第一个错误就返回，默认：true
            //messages: {……} //当前校验使用的国际化信息
        };

        SneakxyValidator.validate(model, rules, function(valid, errors) {
            var div = document.getElementById("errors");
            var content = "<div>校验结果: " + valid + "</div>";
            if(!valid) {
                for(var i=0; i<errors.length; i++) {
                    content += "<div>["+errors[i].name+"]: " + errors[i].message + "</div>";
                }
            }
            div.innerHTML = content;
        }, options);
    </script>
</body>
</html>